import { Card, Button, Input, Select, message } from "antd";

import { useState } from "react";
import { debounce } from "./hook";

import { uploadClientInfo } from "@/api/api_client_home";

const { TextArea } = Input;
function CardInfo() {
  const [Info, setInfo] = useState("");
  const [selectValue, setSelectValue] = useState("");

  const handleChange = (value: any) => {
    // console.log(value);
    setSelectValue(value);
  };

  const debounceHandleInputChange = debounce((value: string) => {
    setInfo(value);
  }, 300);

  const getInfo = (enent: any) => {
    debounceHandleInputChange(enent.target.value);
  };

  const uploadInfo = () => {
    const data = {
      title: selectValue,
      content: Info,
    };

    uploadClientInfo(data)
      .then((res) => {
        console.log(res);
        message.success("上传成功");
      })
      .catch((err) => {
        console.log(err);

        message.error("上传失败");
      });
  };

  return (
    <div>
      <Card
        bordered
        extra={
          <Select
            style={{ width: 120 }}
            onChange={handleChange}
            options={[
              { value: "CPU", label: "CPU" },
              { value: "Center", label: "主板" },
              { value: "GPU", label: "显卡" },
              { value: "Memory", label: "内存" },
              { value: "SSD", label: "机械硬盘" },
              { value: "HDD", label: "硬盘" },
            ]}
          />
        }
        title="信息描述"
        bordered={false}
        style={{ width: 300 }}
        actions={[
          <Button onClick={uploadInfo} type="link" block>
            上传
          </Button>,
        ]}
      >
        <TextArea allowClear onChange={getInfo} rows={4} />
      </Card>
    </div>
  );
}

export default CardInfo;
